<!-- @format -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
        <link rel="stylesheet" href="./css/X2.css">
	</head>

	<body>
		<script>
			// 核心数据
			const data = [
				{ subject: "语文", score: 46 },
				{ subject: "数学", score: 80 },
				{ subject: "英语", score: 100 },
			];
		</script>
		<div id="app" class="score-case">
			<div class="table">
				<table>
					<thead>
						<tr>
							<th>编号</th>
							<th>科目</th>
							<th>成绩</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<script>
							// 1. 表格行要求 编号、科目、成绩、和 删除链接
							// 2. 最后计算出总分 和 平均分

							let sum = 0;

							for (let i = 0; i < data.length; i++) {
								let tr = data[i];

								sum += tr.score;
								document.write(`<tr>`);
								document.write(`<td>${i + 1}</td>`);
								for (const key in tr) {
									document.write(`<td>${tr[key]}</td>`);
								}
								document.write(`<td><a href="#">删除</a></td>`);
								document.write(`</tr>`);
							}
						</script>
					</tbody>
					<tbody>
						<tr>
							<td colspan="4">
								<span class="none">暂无数据</span>
							</td>
						</tr>
					</tbody>

					<tfoot>
						<tr>
							<td colspan="4">
								<span
									>总分：
									<script>
										document.write(`${sum}`);
									</script></span
								>
								<span style="margin-left: 50px"
									>平均分：
									<script>
										document.write(
											`${Math.round(sum / data.length)}`
										);
									</script></span
								>
							</td>
						</tr>
					</tfoot>
				</table>
			</div>
		</div>
	</body>
</html>
